
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="infobox.js"></script>
<script type="text/javascript">
	function initialize() {
		var secheltLoc = new google.maps.LatLng(49.47216, -123.76307);

		var myMapOptions = {
			 zoom: 15
			,center: secheltLoc
			,mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		var theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);


		var marker = new google.maps.Marker({
			map: theMap,
			draggable: true,
			position: new google.maps.LatLng(49.47216, -123.76307),
			visible: true
		});

		
		var boxText = "<div style='background:transparent;font-size:12px; margin-top: 0px;margin-right:-5px;  -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;'>";
		boxText+= "<div style='background:#CC3333;font-weight:bold;border-right: 1px solid #BDBDBD;border-top: 1px solid #BDBDBD;border-left: 1px solid #BDBDBD; color:#fff;  padding:10px; -webkit-border-top-left-radius: 7px;-webkit-border-top-right-radius: 7px;-moz-border-radius-topleft: 7px;-moz-border-radius-topright: 7px;border-top-left-radius: 7px;border-top-right-radius: 7px;'>";
			boxText+= "<span>";
				boxText+= "VESSEL NAME: ";
				boxText+= "<label>";
					boxText+= "NOR FEEDER";
				boxText+= "</label>";
			boxText+= "</span>";
		boxText+= "</div>";
		boxText+= "<div style='padding:10px;-webkit-border-bottom-right-radius: 7px;-webkit-border-bottom-left-radius: 7px;-moz-border-radius-bottomright: 7px;-moz-border-radius-bottomleft: 7px;border-bottom-right-radius: 7px;border-bottom-left-radius: 7px;background:#fff; border-right: 1px solid #BDBDBD;border-left: 1px solid #BDBDBD;border-bottom: 1px solid #BDBDBD;'>";
		boxText+= "<table style='width:420px;'>";
			boxText+= "<tr>";
				boxText+= "<td style='vertical-align: top;'>";
					boxText+= "<table>";
						boxText+= "<tr>";
							boxText+= "<td style='font-weight:bold'>";
								boxText+= "Flag";
							boxText+= "</td>";
							boxText+= "<td>";
								boxText+= "GI";
							boxText+= "</td>";
						boxText+= "</tr>";
						boxText+= "<tr>";
							boxText+= "<td style='font-weight:bold'>";
								boxText+= "LIoyds number";
							boxText+= "</td>";
							boxText+= "<td>";
								boxText+= "9144689";
							boxText+= "</td>";
						boxText+= "</tr>";
						boxText+= "<tr>";
							boxText+= "<td style='font-weight:bold'>";
								boxText+= "Destination";
							boxText+= "</td>";
							boxText+= "<td>";
								boxText+= "FLELIXSTOWE";
							boxText+= "</td>";
						boxText+= "</tr>";
						boxText+= "<tr>";
							boxText+= "<td style='font-weight:bold'>";
								boxText+= "ETA (speed 12 knots)";
							boxText+= "</td>";
							boxText+= "<td>";
								boxText+= "2014-09-08 17:55 (UTC)";
							boxText+= "</td>";
						boxText+= "</tr>";
						boxText+= "<tr>";
							boxText+= "<td style='font-weight:bold'>";
								boxText+= "Last radio signal";
							boxText+= "</td>";
							boxText+= "<td>";
								boxText+= "2014-09-08 17:55 (UTC)";
							boxText+= "</td>";
						boxText+= "</tr>";
					boxText+= "</table>";
				boxText+= "</td>";
			
			
				boxText+= "<td style='vertical-align: top; '>";
					boxText+= "<table>";
						boxText+= "<tr>";
							boxText+= "<td style='text-align:center'><img style='width:100px' src='img.jpg'></td>";
						boxText+= "</tr>";
						boxText+= "<tr>";
							boxText+= "<td style='text-align:left; font-size:10px; border-bottom:1px solid #ebebeb'><label style='color:#999999'>Ship Type:</label><br>Tanker</td>";
						boxText+= "</tr>";
						boxText+= "<tr>";
							boxText+= "<td style='text-align:left; font-size:10px; border-bottom:1px solid #ebebeb'><label style='color:#999999'>Length x Breath Type:</label><br>100m x 16m</td>";
						boxText+= "</tr>";
						boxText+= "<tr>";
							boxText+= "<td style='text-align:left; font-size:10px; '><label style='color:#999999'>Draught:</label><br>4.5m</td>";
						boxText+= "</tr>";
					boxText+= "</table>";
				boxText+= "</td>";
			boxText+= "</tr>";
			
		boxText+= "</table>";
		boxText+= "</div>";
		boxText+= "</div>";
		
		
		var myOptions = {
			 content: boxText
			,disableAutoPan: false
			,maxWidth: 0
			,pixelOffset: new google.maps.Size(-210, -290)
			,zIndex: null
			,boxStyle: { 
			  background: "url('arrow.gif') no-repeat",
			  backgroundAttachment:"fixed",
			  height:"350px",
			  backgroundPosition:"605px 230px"
			  ,opacity: 1
			  ,width: "420px"
			 }
			,closeBoxMargin: "10px 2px 2px 2px"
			,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
			,infoBoxClearance: new google.maps.Size(1, 1)
			,isHidden: false
			,pane: "floatPane"
			,enableEventPropagation: false
		};

		google.maps.event.addListener(marker, "click", function (e) {
			ib.open(theMap, this);
		});

		var ib = new InfoBox(myOptions);
		ib.open(theMap, marker);
	}
</script>

<title>Creating and Using an InfoBox</title>
</head>
<body onload="initialize()">
	<div id="map_canvas" style="width: 100%; height: 600px"></div>
	<p>
	This example shows the "traditional" use of an InfoBox as a replacement for an InfoWindow.
</body>

</html>
